<template>
  <div class="soubg">
	<div class="sou">
    	<!--Begin 所在收货地区 Begin-->
    	<span class="s_city_b">
        	<span class="fl">送货至：</span>
            <span class="s_city">
            	<span>四川</span>
                <div class="s_city_bg">
                	<div class="s_city_t"></div>
                    <div class="s_city_c">
                    	<h2>请选择所在的收货地区</h2>
                        <table border="0" class="c_tab" style="width:235px; margin-top:10px;" cellspacing="0" cellpadding="0">
                          <tr>
                            <th>A</th>
                            <td class="c_h"><span>安徽</span><span>澳门</span></td>
                          </tr>
                          <tr>
                            <th>B</th>
                            <td class="c_h"><span>北京</span></td>
                          </tr>
                          <tr>
                            <th>C</th>
                            <td class="c_h"><span>重庆</span></td>
                          </tr>
                          <tr>
                            <th>F</th>
                            <td class="c_h"><span>福建</span></td>
                          </tr>
                          <tr>
                            <th>G</th>
                            <td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td>
                          </tr>
                          <tr>
                            <th>H</th>
                            <td class="c_h"><span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span></td>
                          </tr>
                          <tr>
                            <th>J</th>
                            <td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td>
                          </tr>
                          <tr>
                            <th>L</th>
                            <td class="c_h"><span>辽宁</span></td>
                          </tr>
                          <tr>
                            <th>N</th>
                            <td class="c_h"><span>内蒙古</span><span>宁夏</span></td>
                          </tr>
                          <tr>
                            <th>Q</th>
                            <td class="c_h"><span>青海</span></td>
                          </tr>
                          <tr>
                            <th>S</th>
                            <td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span class="c_check">四川</span><span>陕西</span></td>
                          </tr>
                          <tr>
                            <th>T</th>
                            <td class="c_h"><span>台湾</span><span>天津</span></td>
                          </tr>
                          <tr>
                            <th>X</th>
                            <td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td>
                          </tr>
                          <tr>
                            <th>Y</th>
                            <td class="c_h"><span>云南</span></td>
                          </tr>
                          <tr>
                            <th>Z</th>
                            <td class="c_h"><span>浙江</span></td>
                          </tr>
                        </table>
                    </div>
                </div>
            </span>
        </span>
      <span class="fl"><router-link to="/front-index">首页</router-link></span>
        <!--End 所在收货地区 End-->
        <span class="fr">
            <template v-if="!loginStatus">
              <span  class="fl">你好，请<router-link to="/login">登录</router-link>&nbsp; 
                <router-link style="color:#ff4e00;" to="/regist">免费注册</router-link>&nbsp;|&nbsp;
                <!-- <a href="#">我的订单</a>&nbsp; -->
              </span>
            </template>

            <template v-if="loginStatus">
              <span class="fl">欢迎：{{userName}} |</span>
              <span class="ss">
                <span>
                    <router-link to="/back-index"> 后台管理 | </router-link>
                </span>
                <span>
                    <router-link to="/back-index">订单管理 | </router-link>
                </span>
                <span>
                    <span style="cursor: pointer;" @click="logout">退出登录 </span>
                </span>
            </span>
            </template>
            <span class="fl">&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="../assets/images/s_tel.png" align="absmiddle" /></a></span>
        </span>
    </div>
</div>
</template>

<script>
export default {
    name:'EasyTop',
    computed:{
      loginStatus(){
        return this.$store.state.loginStatus;
      },
      userName(){
        return this.$store.state.userName;
      },
      userRole(){
        return this.$store.state.userRole;
      }
    },
    data:function(){
        return{
        }
    },
    methods:{
      logout(){
        this.$axios({
          url:'/easybuy/user/logout',
        }).then(rs=>{
          window.sessionStorage.removeItem('token');
          window.sessionStorage.removeItem('userName');
          window.sessionStorage.removeItem('userRole');
          window.sessionStorage.removeItem('collects');
          this.$store.commit('changeLoginStatus',false);
          this.$store.commit('getUserName','');
          this.$store.commit('changeUserRole','');
          this.$store.commit('changeCollects',[]);
          if(this.$route.name!="FrontIndex"){
            this.$router.replace('/front-index');
          }
        })
      }
    }
}   
</script>

<style>

</style>